<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>四个圆的随机连线</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")
    ctx.moveTo(200, 200)

    ctx.stroke()
    var step = Math.PI / 180
    var x = 0, y = 0;
    //两个圆
    ctx.beginPath()
    ctx.arc(150,150,100,0,2*Math.PI)
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(450,150,100,0,2*Math.PI)
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(150,450,100,0,2*Math.PI)
    ctx.stroke()
    ctx.beginPath()
    ctx.arc(450,450,100,0,2*Math.PI)
    ctx.stroke()
    ctx.moveTo(150,50)
    setInterval(function () {
        var p1 = 2*Math.PI*Math.random()
        var ran1 = 150+Math.floor(Math.random()*2)*300
        var ran2 = 150+Math.floor(Math.random()*2)*300
        console.log(p1)
//        ctx.beginPath()
        ctx.lineTo(ran1 + 100 * Math.cos(p1), ran2 + 100  * Math.sin(p1))
//        x += step
//        y += step
        ctx.stroke()
    }, 100)

</script>
</body>
</html>